<script setup>
import * as api from "@/api/common/select-person.js";

/**
 * emit
 */
const emits = defineEmits([
  'selectPerson',
  'update:modelValue',
])

/**
 * prop
 */
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: "选择人员"
  },
  // 是否显示选择人员
  showSelectPerson: {
    type: Boolean,
    default: true,
  },
  //判断是复选还是单选、默认复选
  checkType: {
    type: Boolean,
    default: true
  },
})

/**
 * V-Table引用
 */
const Table = ref()

/**
 * data
 */
const tableData = ref([])
const loading = ref(false)
const pageQuery = reactive({
  page: 1,
  limit: 50,
  total: 0,
  orders: [],
  filters: [],
  condition: {
    key: "",
    status: '',
    orgId: '-1',
  },
})
const selectPersons = ref([])
const choosePersonLoading = ref(false)

/**
 * computed
 */
const visible = computed(
    {
      // getter
      get(){
        return props.modelValue
      },
      // setter
      set(val){
        emits('update:modelValue',val)
      }
    }
)

const tableInfo = computed(()=>{
  const tableProps = {
    data: tableData.value,
    loading: loading.value,
    checkConfig: { highlight: true },
    checkboxConfig: { reserve: true },
    showSelectCount: true,
    showExportBtn: false,
  }
  return { ...tableProps }
})

/**
 * watch
 */
watch(
    () => props.checkType,
    (val) =>{
      const type = val ? 'checkbox' : 'radio'
      api.columnInfo.forEach(ele=>{
        if (val) {
          if (ele.type === 'radio') ele.type = type
        }else {
          if (ele.type === 'checkbox') ele.type = type
        }
      })
    },
    {
      immediate: true,
    }
)

/**
 * method
 */
const init = () => {
  init_PageQuery()
}

const init_PageQuery = async () => {
  loading.value = true
  const { code, data } = await api.list(pageQuery)
  if (code === 200) {
    loading.value = false
    tableData.value = data.records
    pageQuery.total = data.total
     if (selectPersons.value.length > 0) {
       // 回显复选框选中状态
       const ids = tableData.value.filter(item => selectPersons.value.map(ele => ele.id).includes(item.id))
       await nextTick(() => {
         Table.value.VTable.setCheckboxRow(ids, true)
       })
     }
  }
}

const selectChange = (selectRows) => {
  const tagTypes = ['primary', 'success', 'info', 'warning', 'danger']
  const randomIndex = () => Math.floor(Math.random() * 5)
  selectRows.forEach(item =>{
    item.tagType = tagTypes[randomIndex()]
    item.size = 'small'
  })
  selectPersons.value = selectRows
}

const choosePerson = () => {
  if (selectPersons.value.length > 0 ){
    choosePersonLoading.value = true
    emits('selectPerson', selectPersons.value)
    setTimeout(()=>{
      choosePersonLoading.value = false
      visible.value = false
    },300)
  }else {
    return ElMessage({message: '请选择数据', type: 'warning',})
  }
}

onMounted(() => {
  init()
})

</script>

<template>
  <v-dialog v-model="visible" :title="title" :show-btn="false" @close="selectPersons = []">
    <div class="select-box">
      <div class="box-top">
        <div class="top-left">
          <div class="top-title" v-if="props.showSelectPerson&&selectPersons.length > 0">已选人员</div>
          <div class="top-person" v-if="props.showSelectPerson&&selectPersons.length > 0">
            <el-tag v-for="item in selectPersons" :key="item.id" :type="item.tagType">
              {{ item.nickname }}
            </el-tag>
          </div>
        </div>
        <div class="top-right">
          <div class="top-btn">
            <el-button type="primary" size="small" :loading="choosePersonLoading" @click="choosePerson">
              <template #icon><i-ep-user /></template>选择
            </el-button>
          </div>
        </div>
      </div>
      <div class="box-center">
        <div class="left-tree">
          <v-query-tree v-model="pageQuery.condition.orgId" @query="init_PageQuery" />
        </div>
        <span class="line"></span>
        <div class="right-table">
          <v-table
              ref="Table"
              v-model="pageQuery"
              :table-info="tableInfo"
              :column-info="api.columnInfo"
              @query="init_PageQuery"
              @selectChange="selectChange"
          >
            <template #status="{row}">
              <el-tag v-if="row.status" type="success">启用</el-tag>
              <el-tag v-else type="info">禁用</el-tag>
            </template>
          </v-table>
        </div>
      </div>
    </div>
  </v-dialog>
</template>

<style scoped lang="scss">
.select-box {
  display: flex;
  flex-direction: column;
  margin-top: -10px;
  .box-top {
    display: flex;
    justify-content: space-between;
    .top-left {
      .top-title {
        color: #00a7ff;
        margin-bottom: 5px;
      }
      .top-person {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        max-height: 82px;
        overflow: auto;
        .el-tag {
          margin-right: 8px;
        }
      }
    }
    .top-right {
      display: flex;
      justify-content: flex-end;
    }
  }
  .box-center {
    display: flex;
    margin-top: 5px;
    .left-tree {

    }
    .line {
      margin: 10px 2px 10px 0;
      border-right: 1px solid #dcdfe6;
      display: inline-block;
    }
    .right-table {
      max-width: calc(100% - 300px)
    }
  }
}
</style>